.f {
  position: relative;
  margin: 300px;
}
.f .s {
  position: absolute;
  width: 100px;
  height: 100px;
  transform-origin: -100% center;
  border-radius: 100%;
  mix-blend-mode: darken;
}
.f .s:nth-child(1) {
  background-color: hsl(240deg, 8%, 50%);
  transform: translate(100px) rotate(30deg);
}
.f .s:nth-child(2) {
  background-color: hsl(240deg, 16%, 50%);
  transform: translate(100px) rotate(60deg);
}
.f .s:nth-child(3) {
  background-color: hsl(240deg, 24%, 50%);
  transform: translate(100px) rotate(90deg);
}
.f .s:nth-child(4) {
  background-color: hsl(240deg, 32%, 50%);
  transform: translate(100px) rotate(120deg);
}
.f .s:nth-child(5) {
  background-color: hsl(240deg, 40%, 50%);
  transform: translate(100px) rotate(150deg);
}
.f .s:nth-child(6) {
  background-color: hsl(240deg, 48%, 50%);
  transform: translate(100px) rotate(180deg);
}
.f .s:nth-child(7) {
  background-color: hsl(240deg, 56%, 50%);
  transform: translate(100px) rotate(210deg);
}
.f .s:nth-child(8) {
  background-color: hsl(240deg, 64%, 50%);
  transform: translate(100px) rotate(240deg);
}
.f .s:nth-child(9) {
  background-color: hsl(240deg, 72%, 50%);
  transform: translate(100px) rotate(270deg);
}
.f .s:nth-child(10) {
  background-color: hsl(240deg, 80%, 50%);
  transform: translate(100px) rotate(300deg);
}
.f .s:nth-child(11) {
  background-color: hsl(240deg, 88%, 50%);
  transform: translate(100px) rotate(330deg);
}
.f .s:nth-child(12) {
  background-color: hsl(240deg, 96%, 50%);
  transform: translate(100px) rotate(360deg);
}
.f .s:nth-child(13) {
  background-color: hsl(240deg, 100%, 50%);
  transform: translate(100px) rotate(390deg);
}
.f .s:nth-child(14) {
  background-color: hsl(240deg, 100%, 50%);
  transform: translate(100px) rotate(420deg);
}
.f .s:nth-child(15) {
  background-color: hsl(240deg, 100%, 50%);
  transform: translate(100px) rotate(450deg);
}
.f .s:nth-child(16) {
  background-color: hsl(240deg, 100%, 50%);
  transform: translate(100px) rotate(480deg);
}
.f .s:nth-child(17) {
  background-color: hsl(240deg, 100%, 50%);
  transform: translate(100px) rotate(510deg);
}
.f .s:nth-child(18) {
  background-color: hsl(240deg, 100%, 50%);
  transform: translate(100px) rotate(540deg);
}
.f .s:nth-child(19) {
  background-color: hsl(240deg, 100%, 50%);
  transform: translate(100px) rotate(570deg);
}
.f .s:nth-child(20) {
  background-color: hsl(240deg, 100%, 50%);
  transform: translate(100px) rotate(600deg);
}
.f .s:nth-child(21) {
  background-color: hsl(240deg, 100%, 50%);
  transform: translate(100px) rotate(630deg);
}
.f .s:nth-child(22) {
  background-color: hsl(240deg, 100%, 50%);
  transform: translate(100px) rotate(660deg);
}
.f .s:nth-child(23) {
  background-color: hsl(240deg, 100%, 50%);
  transform: translate(100px) rotate(690deg);
}
.f .s:nth-child(24) {
  background-color: hsl(240deg, 100%, 50%);
  transform: translate(100px) rotate(720deg);
}/*# sourceMappingURL=30_20220228220115.css.map */